tags: 2021鐵人賽 React

先從mobile版型的頁面來看，可以分為幾個部份，如下圖：

分為最上面Title、TaiwanStock、USStock、GlobalStock，共四個部分。

UI元件共用

可以發現股市指數區塊的版型都長得很像，應該是可以共用UI的，因此這邊會先將下面這個部份獨立成一個UI元件，如下圖。

這個小元件的程式碼

src\UI\IndexCloseInfo

import React from 'react';
import styles from './IndexCloseInfo.module.css';
import { Col } from 'react-bootstrap';

const Card = () => {
  return (
    <Col sm={12} md={6} lg={4} xl={3} xxl={3} className={styles.bar}>
      <div className={styles.bar_left_side}>
        <div className={styles.bar_icon}>加</div>
      </div>
      <div className={styles.bar_right_side}>
        <p className={styles.bar_text}>台股加權指數</p>
        <div className={styles.bar_data_group}>
          <p className={styles.bar_data}>17300</p>
          <p className={styles.bar_data}>|</p>
          <p className={styles.bar_data_change}>-70</p>
          <p className={styles.bar_data}>|</p>
          <p className={styles.bar_data_change}>-0.3%</p>
        </div>
      </div>
    </Col>
  )
};

export default Card;

其實台股、美股、國際股市三個板塊的版型也是一樣的，不過因為台股的部分，有三大法人買賣超的資訊，不是單純的指數收盤，還不太確定能不能拉成共用的UI，因此這三個板塊先不做成統一的UI元件，之後有需要再把它合併。

組合程式碼

做好UI元件之後，剩下的就是把各股式資訊板塊寫好，其實就是簡單的切切版，因此這邊就不詳列程式碼，大致上的檔案架構如下。
Home頁面包含整個首頁的檔案，而裡面有四個資料夾分別代表四小區塊的檔案，最後再由index.js去組裝起來。

小結

看到這邊可能會發現重複做了跟之前一樣的事情，不外乎就是畫wireframe、切版、串接API、拉共用的UI元件，因為這次想做的頁面還蠻多的，應該就是重複這樣的過程到最後一天囉。